<template>
  <div>

    <a-card>
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" :tab=tab1>
          <unDoList></unDoList>
        </a-tab-pane>
        <a-tab-pane key="2" :tab=tab2>
          <myStartUp></myStartUp>
        </a-tab-pane>
        <a-tab-pane key="3" :tab=tab3>
          <myChecked></myChecked>
        </a-tab-pane>
        <a-tab-pane key="4" :tab=tab4>
          <aboutMine></aboutMine>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, watchEffect, watch, toRaw } from 'vue';
import unDoList from './unDoList/index.vue';
import myStartUp from './myStartUp/index.vue';
import myChecked from './myChecked/index.vue';
import aboutMine from './aboutMine/index.vue';
import { useWorkParamsStore } from '/@/store/modules/workParams';
import { WorkParams } from '/#/store';

export default defineComponent({
  name: 'Mywork',
  components: { unDoList, myStartUp, myChecked, aboutMine },
  setup() {
    const state = reactive({
      lengths: {} as WorkParams
    })
    const activeKey = ref('1');
    const storeNum = useWorkParamsStore()
    state.lengths = { ...storeNum }
    const tab1 = computed(() => {
      return '待我处理' + '(' + state.lengths.unDoNum + ')'
    })
    const tab2 = computed(() => {
      return '我发起的' + '(' + state.lengths.CheckedNum + ')'
    })
    const tab3 = computed(() => {
      return '我已审批' + '(' + state.lengths.DoneNum + ')'
    })
    const tab4 = computed(() => {
      return '关于我的' + '(' + state.lengths.AboutNum + ')'
    })
    watch(storeNum, (value) => {
      state.lengths = { ...value }
    })
    watch(activeKey, (value) => {
      console.log('参数值', value);
    })
    return { activeKey, storeNum, state, tab1, tab2, tab3, tab4 };
  },
});
</script>
<style scoped>
v-deep .my-active-class {
  background-color: #1890ff;
  /* 设置为蓝色 */
  color: white;
  /* 设置为白色 */
}</style>
